<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务评价</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <style>
        span.pj{
            cursor: pointer;
            font-size: 30px;
        }
        .fontcolor{
            color: red;
        }
    </style>
    <script>
        window.onload = function(){
            $(".zongti .pj").click(function (e) { 
                //初始化，清除上一次点击结果
                for(var i=0;i<=$(".zongti .pj").length;i++){
                    $(".zongti .pj").eq(i).removeClass("fontcolor");
                }
                var num = $(".zongti .pj").index(this);
                for(var i = 0;i <= num;i++){
                    $(".zongti .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".kouwei .pj").click(function (e) { 
                //初始化，清除上一次点击结果
                for(var i=0;i<=$(".kouwei .pj").length;i++){
                    $(".kouwei .pj").eq(i).removeClass("fontcolor");
                }
                var num = $(".kouwei .pj").index(this);
                for(var i = 0;i <= num;i++){
                    $(".kouwei .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".huanjing .pj").click(function (e) { 
                //初始化，清除上一次点击结果
                for(var i=0;i<=$(".huanjing .pj").length;i++){
                    $(".huanjing .pj").eq(i).removeClass("fontcolor");
                }
                var num = $(".huanjing .pj").index(this);
                for(var i = 0;i <= num;i++){
                    $(".huanjing .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".fuwu .pj").click(function (e) { 
                //初始化，清除上一次点击结果
                for(var i=0;i<=$(".fuwu .pj").length;i++){
                    $(".fuwu .pj").eq(i).removeClass("fontcolor");
                }
                var num = $(".fuwu .pj").index(this);
                for(var i = 0;i <= num;i++){
                    $(".fuwu .pj").eq(i).addClass("fontcolor");
                }
            });
        }
    </script>
</head>

<body>
    <div class="zongti">
        <span>总体评价</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
    </div>
    <div class="kouwei">
        <span>口味评价</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
    </div>
    <div class="huanjing">
        <span>环境评价</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
    </div>
    <div class="fuwu">
        <span>服务评价</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
        <span class="pj">&#9733</span>
    </div>
</body>

</html>